<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'/>
    <title>Draw GeoJSON points</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet'/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<!-- 主要保存地图的位置 -->
<div id='map'></div>

<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiaG9uZ2hvbmcxMjA3IiwiYSI6ImNqajljMzQyNjAzaW0zcG10cmNweDhmaXoifQ.iDtGVXhNQlIwUihztOcPXw';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v10',
        // 中心点的位置
        center: [107.4, 33.42],
        zoom: 3
    });

    map.on('load', function () {
        map.addSource('source', {
            "type": "geojson", // 数据是geojson格式
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [108.56, 34.15]
                    },
                    "properties": {
                        "title": "Mapbox DC",
                        "icon": "monument"
                    }
                }]
            }
        })


        //  添加一个图层
        map.addLayer({
            "id": "circle", // 点型
            "type": "circle",
            // "type": "symbol",
            "source":'source',
            "paint": {
                "circle-radius": 10,
                "circle-color": "#D7A92A",
            }
        });

        //  添加一个图层
        map.addLayer({
            "id": "points", // 点型
            // "type": "circle",
            "type": "symbol",
            "source":'source',
            "layout": {
                "icon-image": "{icon}-15",
                "text-field": "{title}",
                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                // "text-offset": [0, 0.6],
                "text-offset": [0, 0],
                "text-anchor": "top"
            }
        });
    });
</script>

</body>

</html>